<template>
    <div class="top-menu">
        <el-menu :default-active="activeIndex" mode="horizontal" @select="select">
            <el-menu-item :index="item.path" v-for="(item, index) in dynamicRoutes[0].children" :key="index">
                {{ item?.meta?.title }}
            </el-menu-item>
        </el-menu>
        <div class="layout" @click="layout">
            退出登录
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { dynamicRoutes } from '@/router/router.config';
import { useRouter } from "vue-router";
const emits = defineEmits(['changeSiderMenu']);
const router = useRouter();
const activeIndex = ref('');
onMounted(() => {
    activeIndex.value = router.currentRoute.value.matched[1].path;
    dynamicRoutes[0].children.forEach((item) => {
        if (item.path === activeIndex.value) {
            emits('changeSiderMenu', item.children || [])
        }
    });
});

const layout = () => {
    router.replace({ path: '/login' });
};

const select = (index: string) => {
    dynamicRoutes[0].children.forEach((item) => {
        if (item.path === index) {
            emits('changeSiderMenu', item.children || [])
        }
    });
    router.push({ path: index });
};

</script>

<style lang="less" scoped>
.top-menu {
    display: flex;
    align-items: center;

    .el-menu {
        flex: 1;
    }

    .layout {
        font-size: 18px;
        cursor: pointer;
    }
}
</style>